import React from 'react';
import { Carousel } from 'antd';
import 'antd/dist/antd.css';
import './tejia.scss'
import axios from '../../axios/axios'
import toleft from '../../img1/toleft.png';
import toright from '../../img1/toright.png';
import $ from 'jquery';
import { Pagination } from 'antd';

import { Link } from 'react-router-dom'
function itemRender(current, type, originalElement) {
    if (type === 'prev') {
      return <a>上一页</a>;
    }
    if (type === 'next') {
      return <a>下一页</a>;
    }
    return originalElement;
  }
class Jingxuan extends React.Component {
	constructor(props) {
        super(props);
        this.state = {
            arr: [],
            arr1: []
        }
    }
    componentWillMount(){
        axios.get('small/commodity/verify/v1/browseList?page=1&count=8').then(res=>{
            this.setState({
                arr1:res.data.result
            })
        });
       
        axios.get('small/commodity/v1/commodityList').then(res=>{
            // console.log(res)
            var arr =res.data.result.rxxp.commodityList.concat(res.data.result.pzsh.commodityList,res.data.result.mlss.commodityList,this.state.arr1);
            this.setState({
                arr:arr
            })
        });
    }
    componentDidMount(){
        
        $('.xianshiqg-scroll-l').click(function(){
            if($('.xianshiqg-content').position().left>-1180){
                $('.xianshiqg-content').css({left:$('.xianshiqg-content').position().left-1180+'px'})
            }
        })
        $('.xianshiqg-scroll-r').click(function(){
            if($('.xianshiqg-content').position().left<0){
                $('.xianshiqg-content').css({left:$('.xianshiqg-content').position().left+1180+'px'})
            }
        })
    }
    render() {
        return (<div className="tejiaww">
            <Carousel autoplay className="jingtou">
                <div><img src={require('../../img3/banner.png').default} alt=""/></div>
                <div><img src={require('../../img3/banner.png').default} alt=""/></div>
                <div><img src={require('../../img3/banner.png').default} alt=""/></div>
                <div><img src={require('../../img3/banner.png').default} alt=""/></div>  
            </Carousel>
            <div className="xianshiqg container">
                    <div className="jxpp-top">
                        <h3><span>限时</span><span>抢购</span></h3>
                        <span>每日精选12款特价商品，天天送不停</span>
                    </div>
                    <div className="xianshiqg-scroll">
                        <img className="xianshiqg-scroll-l" src={toleft} alt=""/>
                        <img  className="xianshiqg-scroll-r" src={toright} alt=""/>
                        <r></r>
                    <div className="xianshiqg-content">
                    {this.state.arr1.map((v,i)=>{
                    return(<div key={v.commodityId}>
                        <img src={v.masterPic} alt="" />
                        <span>{v.commodityName}</span>
                        <p>
                            <span>￥{v.price}</span>&nbsp;<i>￥{v.price+100}</i>
                        </p>
                    </div>)
                })}
                    </div>
                    </div>
            </div>
            <div className="jingpu">
            <div className="jxpp-top container">
                        <h3><span>限时</span><span>抢购</span></h3>
                        <span>每日精选12款特价商品，天天送不停</span>
                    </div>
                <div className="jxpp-list container">{
                    this.state.arr.map((v,i)=>{
                        return(<div key={v.commodityId}>
                            <img src={v.masterPic} alt="" />
                            <span>{v.commodityName}</span>
                            <p>
                                <span>￥{v.price}</span>&nbsp;<i>￥{v.price+100}</i>
                            </p>
                        </div>)
                    })

                }</div> 
            </div>   
            <div className="fenye">
                    <Link to="###">首页</Link>
                    <Pagination showSizeChanger={false} showQuickJumper total={500} itemRender={itemRender} />
                    <Link to="###">确定</Link>
                    <span>共500条</span>
                    </div>   
        </div>)
    }
}
export default Jingxuan;